<template>
  <div class="box">
    <div class="head"><top @openFrame="openFrame" :header="header"></top></div>
    <div class="navs">
      <router-link :to="item.to" v-for="item in navs" :key="item.tit">{{
        item.tit
      }}</router-link>
    </div>
    <div class="main">
      <transition name="route">
        <router-view></router-view>
      </transition>
    </div>
    <div @click="showcar" class="footer">
      <Footer></Footer>
    </div>

    <transition name="frame">
      <Frame v-if="frame" @closeFrame="closeFrame"></Frame>
    </transition>
    <transition name="mask">
      <div v-if="dibug" @click="showcar" class="mask"></div>
    </transition>
    <transition name="sellfood">
      <div v-if="dibug" class="sellfood">
        <div class="foodbnt">
          <span>已选商品</span>
          <button @click="clear">清空</button>
        </div>
        <ul>
          <li v-for="(item, i) in goods" :key="i">
            <span class="tit">{{ item.name }}</span
            ><span class="price">￥{{ item.price }}</span>
            <div class="bnts">
              <button @click="less(item)">-</button>
              <span>{{ item.num }}</span>
              <button @click="add(item)">+</button>
            </div>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import Top from "@/components/Top.vue";
import Frame from "./components/Frame.vue";
import { ListData, GoodsData, SellerData } from "./api/App";
import { set } from "./utils/tool/tool";
export default {
  components: { Top, Footer, Frame },
  data() {
    return {
      dibug: false,
      navs: [
        { tit: "商品", to: "/commodity" },
        { tit: "评价", to: "/evaluate" },
        { tit: "商家", to: "/business" },
      ],
      header: {},
      frame: false,
    };
  },
  computed: {
    goods() {
      return this.$store.getters.cars;
    },
  },
  mounted() {
    this.goodsList();
    this.getseller();
    this.getgoods();
  },
  methods: {
    async goodsList() {
      try {
        let res = await ListData();
        res.data.goodsList.forEach((v) => {
          v.foods.forEach((v2) => {
            v2.num = 0;
          });
        });
        console.log(res.data.goodsList);
        set("goods", res.data.goodsList);
        this.$store.commit("CHANGELIST", { data: res.data.goodsList });
      } catch (err) {
        console.log(err);
      }
    },
    async getgoods() {
      try {
        let res = await GoodsData();
        set("discuss", res.data);
      } catch (err) {
        console.log(err);
      }
    },
    async getseller() {
      try {
        let { data } = await SellerData();
        this.header = data.data;
        set("shop", data.data);
      } catch (err) {
        console.log(err);
      }
    },
    openFrame() {
      this.frame = true;
    },
    closeFrame() {
      this.frame = false;
    },
    showcar() {
      if (this.dibug) {
        this.dibug = false;
      } else {
        this.dibug = true;
      }
    },
    clear() {
      this.$store.commit("CLEAR");
    },
    less(v) {
      console.log(v);
      console.log(v.id);
      this.$store.commit("Less", { data: v, value: v.id });
    },
    add(v) {
      console.log(v);
      console.log(v.id);
      this.$store.commit("ADD", { data: v, value: v.id });
    },
  },
};
</script>

<style lang="less" scoped>
.frame-enter-active,
.frame-leave-active {
  overflow: hidden;
  transform: scaleX(1) translateY(0%);
  transition: all 0.5s;
}
.frame-enter, .frame-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: scaleX(0) translateY(100%);
}
.mask-enter-active,
.mask-leave-active {
  opacity: 1;
  transition: all 0.5s;
}
.mask-enter, .mask-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.sellfood-enter-active,
.sellfood-leave-active {
  transform: translateY(0%);
  transition: all 0.5s;
}
.sellfood-enter, .sellfood-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(100%);
}

.main {
  flex: 1;
  overflow-y: scroll;
}
.navs {
  height: 50px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #000;
  line-height: 50px;
  a {
    color: #000;
    padding: 0 30px;
    &.router-link-active {
      color: red;
    }
  }
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer {
  height: 60px;
  position: relative;
  z-index: 99;
}

.mask {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
.sellfood {
  background-color: #fff;
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: 60px;
  z-index: 3;
  overflow-y: scroll;
  .foodbnt {
    padding: 0px 10px;
    background-color: #edeef2;
    height: 60px;
    color: #66676b;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }
  li {
    display: flex;
    height: 60px;
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    align-items: center;
    .price {
      width: 60px;
      color: red;
      font-weight: bold;
      margin-right: 10px;
    }
    .bnts {
      width: 60px;
      display: flex;
      justify-content: space-between;
      button {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #019fd9;
        color: #fff;
      }
    }
    .tit {
      flex: 1;
    }
  }
}
</style>